<template>
    <div class="login">
        <div class="imgBox">
            <van-icon name="arrow-left" size="20px" @click="goback()" />
        </div>
        <div class="title">
            忘记密码
        </div>
        <van-cell-group>
                <van-field v-model="username"  label="手机号" placeholder="请输入手机号" type="number" />
            </van-cell-group>


        <!-- 登录 -->
        <div class="denglu" @click="goProveCode()">
            获取验证码
        </div>

        <!-- 忘记密码 -->
        <div class="forget">
            登录/注册表示同意<i>服务协议</i>和<i>隐私政策</i>
        </div>
    </div>
</template>

<script>
    import { mapMutations } from 'vuex'
    import { Toast } from "vant"
    export default {
        data() {
            return {
                username: "",
                type: ""
            }
        },
        methods: {
            // 如果methods里面还有其他函数，就要在辅助函数名称的前面加上扩展运算符
            ...mapMutations(['changeToken']),
            // onLogin(res){
            //     Toast('登录成功')

            //     // 获取token
            //     const {token} = res

            //     // 把token存到本地
            //     localStorage.setItem('token',token)
            //     // 把token存到store
            //     this.changeToken(token)	

            //     // 返回到上一页
            //     this.$router.back()
            // }

            goback() {
                this.$router.back()
            },

            goProveCode() {
                const { username, type } = this

                // 前端检验，用户名和密码必填
                if (!username) {
                    // 使用mint-ui的弹框提示组件
                    Toast({
                        message: '请填写手机号码', // 显示内容

                        duration: 1000 // 显示时间
                    })

                    return false
                }
                //正则验证手机号码
                var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                if (!myreg.test(username)) {
                    Toast({
                        message: '请输入正确的手机号码', // 显示内容
                        duration: 1000 // 显示时间
                    })
                    return false;
                } else {
                    // 获取验证码
                    this.$axios.get("/getverifCode", {
                        params: {
                            phone: username,
                            flag: false
                        }
                    }).then((res) => {
                        console.log(res);
                        const { data, status } = res

                        if (data.code == 200) {
                            Toast(data.message)
                            console.log(data.vcode)
                            localStorage.setItem('flag',false)
                            localStorage.setItem('sessionid',data.sessionid)
                            localStorage.setItem('username',username)

                            this.$router.push(
                                {
                                    name: 'ProveCode',
                                    params: {
                                        username,
                                        type,
                                        sessionid: data.sessionid,
                                        vcode:data.vcode,
                                        flag:false
                                    }
                                }
                            )
                        } else {
                            Toast("cuowu")
                        }

                    })
                }


            },

        },
        mounted() {
            // alert(666)
            // this.time()
            this.type = this.$route.params.type
            console.log(this.type)
        }
    }
</script>

<style lang="scss" scoped>
    .login {
        padding-top: 30px;
    }

    .imgBox {
        position: fixed;
        left: 4px;
        top: 10px;
        overflow: hidden;
        width: 24px;
        height: 20px;
    }

    .goback {
        width: 20px;
        height: 24px;
    }

    .title {

        margin: 30px 0;
        margin-left: 12px;
        width: 115px;
        height: 30px;
        color: rgba(16, 16, 16, 1);
        font-size: 28px;
        text-align: left;
        font-family: SourceHanSansSC-bold;
        font-weight: 900;
    }

    #username,
    #password {
        width: 99%;
        height: 36px;
        margin: 0 auto;
    }

    .cell {
        text-align: center;
        position: relative;


    }

    .cell img {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 4px;
        top: 8px;
    }

    .denglu {
        margin: 0 auto;
        margin-top: 30px;
        width: 99%;
        height: .96rem;
        border-radius: 4px;
        background-color: #07c160;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        text-align: center;
        font-family: Microsoft Yahei;
        border: 1px solid rgba(187, 187, 187, 1);
        line-height: .96rem;
        max-height: 48px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .forget {
        margin-top: 8px;
        color: #999;
        font-size: 14px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
        text-align: center;
    }

    .forget i {
        color: rgba(125, 227, 7, 1)
    }
</style>